<template>
  <div class="person">
    <h5>一辆{{ car.brand }}车售价：{{ car.price }}</h5>
    <button @click="changePrice">修改价格</button>
    <button @click="changeCar">换车</button>
    <br/>
  </div>
</template>

<script lang="ts" setup name="Person1">
  import {ref} from 'vue';
  import {reactive} from 'vue';
    //数据
    let car= ref({
        brand:"奥迪",
        price:21.58
    })


    //方法
    function changePrice(){
      console.log(car);
      car.value.price+=10
    }

    function changeCar(){
      //car={brand:"bmw",price:29.99}//不生效，因为赋值的对象并非响应式，只是普通对象
      //car=reactive({brand:"bmw",price:29.99})//依旧不生效，因为原reactive定义的对象不支持二次定义reactive
      //Object.assign(car,{brand:"bmw",price:29.99})//生效，Object.assign可以完全移植属性，不影响reactive，只换属性
      car.value={brand:"bmw",price:29.99}
    }

</script>

<style scoped>
.person{
    background-color: #8eace8;
    box-shadow: 0 0 10px;
    border-radius: 10px;
}
</style>